<template>
  <div class="tagFlex">
    <h2 class="title">{{tag.name}}</h2>
    <router-link class="blog-tag" v-for="item in tag.pages"  :key="item.key" :to="item.path">
      {{ item.title }}
    </router-link>
  </div>
</template>

<script>
export default {
  props: ['tag'],
}
</script>

<style lang="stylus">
.tagFlex
  display flex
  flex-direction column
  .title
    margin-bottom 20px
  .blog-tag
    display inline-flex
    align-items center
    height 45px
    word-break break-word
    font-size 20px
    margin-right 20px
    margin-bottom 20px
    padding-left 50px
    border-radius 5px
    font-weight 300
    text-align left
    box-sizing border-box
    transition background-color 0.3s
    color $darkTextColor
    text-decoration none
    transition all 0.5s

    &:hover
      color $accentColor !important
      text-decoration underline

@media screen and (max-width: 768px)
  .blog-tag
    font-size 14px
    padding 3px 10px
    margin-right 10px
    margin-bottom 10px
</style>
